<template>
    <view class="one-mode-wrapper">
        <view v-for="(item, index) in list" :key="'goods' + index">
            <view
                class="one-mode-items"
                @click="jump(item)"
                :style="{
                    padding: data.padding,
                    backgroundColor: data.backgroundColor,
                    borderRadius: data.borderRadius,
                    marginBottom: data.marginBottom
                }"
            >
                <view class="image-wrap">
                    <img-cache :src="`${global.productImageUrl}${item.picId}/1`" width="100%" mode="widthFix" :borderRadius="data.borderRadius" absolute />
                    <u-image src="/static/icon/10010.png" width="52" height="35" v-if="item.videoNum > 0" class="video-tag"></u-image>
                </view>
                <view class="right">
                    <view class="right-inner-wrapper">
                        <!-- 商品标题 -->
                        <view class="good-name" :style="data.titleStyle">{{ item.releaseName }}</view>
                        <!-- 价格 -->
                        <view class="price-line">
                            <view class="" v-if="data.showPrice">
                                <view class="good-price" :style="data.priceStyle">
                                    <view class="o-font-bold" v-if="token"> ￥{{ Number(item.userPrice).toFixed(2) }}</view>
                                </view>
                                <!-- 建议零售价 -->
                                <view class="Suggested-retail-price" v-if="data.showSuggest">
                                    <text class="line-through">建议零售价：￥{{ item.suggestedPrice || 0 }}</text>
                                </view>
                            </view>
                        </view>
                        <!-- 限时特惠 -->
                        <view class="activity-label" :style="data.labelStyle" v-if="data.showLabel">
                            {{ item.activitiesLabel }}
                        </view>
                        <!-- 星级 -->
                        <view class="stars-level" v-if="data.showStar">
                            <stars :count="item.starsLevel" :color="data.starColor"></stars>
                        </view>
                        <!-- 已售 -->
                        <view class="good-sales">
                            <view v-if="data.showSales">已售{{ $u.$tools.numberFormat(item.saleNum) }}件</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import stars from '../stars.vue'
import global from '@/config'
import { computed, reactive, ref } from 'vue'
import { useUserStore } from '@/store'

interface Props {
    list: Array<any>
    config: any
}

const props = withDefaults(defineProps<Props>(), {
    list: () => [],
    config: () => ({})
})

const $u = computed(() => {
    return uni.$u
})

const token = useUserStore().token

const data = reactive<any>({})

for (const key in props.config) {
    data[key] = ref(props.config[key])
}

function jump(item: any) {
    uni.$u.$MRouter.details.to({ id: item.id })
}
</script>

<style lang="scss" scoped>
@import '../common.scss';
</style>
